<template>
	<view class="master">
		<view class="flexJusp" style="width:750rpx;">
			<view class="flex">
				<image style="width:96rpx;height:96rpx;border-radius:50%;margin:0 16rpx 0 28rpx;" :src="detail.icon"></image>
				<view>
					<view style="font-size: 30rpx;font-weight: bold;margin:8rpx 0 0;">{{detail.name}}</view>
					<view style="font-size: 22rpx;font-weight: bold;color: #F25816;">{{detail.allpoints}}分</view>
				</view>
			</view>
			<view class="flex" style="margin-right:28rpx;font-size: 24rpx;color: #333333;">
				<view style="text-align: center;" @click="caozuo(2)">
					<image v-if="detail.ok==0" style="width:34rpx;height:34rpx;" src="/static/image/01_1sc.png"></image>
					<image v-else style="width:34rpx;height:34rpx;" src="/static/image/01_1sca.png"></image>
					<view>收藏</view>
				</view>
				<view style="text-align: center;margin-left:48rpx;" @click="caozuo(1)">
					<image v-if="detail.la==1" style="width:34rpx;height:34rpx;" src="/static/image/shifulah.png"></image>
					<image v-else style="width:34rpx;height:34rpx;" src="/static/image/shifulh.png"></image>
					<view>拉黑</view>
				</view>
			</view>
		</view>
		<view class="flex" style="width:654rpx;height: 148rpx;background: #F6F6F6;border-radius: 12rpx;margin:20rpx auto;padding:16rpx 24rpx;font-size:26rpx;">
			<view style="width:380rpx;">
				<view>累计完工<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{detail.okorder}}</text><text style="color: #1176EF;"> 单</text></view>
				<view style="margin:6rpx 0;">服务质量<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{detail.zhiliang}}</text><text style="color: #1176EF;"> 分</text></view>
				<view>师傅距离<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{juli}}</text><text style="color: #1176EF;">公里</text></view>
			</view>
			<view>
				<view>上门速度<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{detail.shudu}}</text><text style="color: #1176EF;"> 分</text></view>
				<view style="margin:6rpx 0;">服务态度<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{detail.taidu}}</text><text style="color: #1176EF;">分</text></view>
				<view>服务时间<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{detail.time}}</text><text style="color: #1176EF;">分</text></view>
			</view>
		</view>
    <view v-if="list.skillLength !==0" class="flex" style="flex-wrap:wrap;padding:0 20rpx;">
      <view>擅长技能：</view>
      <view v-for="(item,index) in list.skill" :key="index" style="padding:4rpx 16rpx;border-radius: 12rpx;border: 2rpx solid #1176EF;font-size: 24rpx;color: #1176EF;margin:0 16rpx 16rpx 0;">{{item.kind}}</view>
    </view>
    <view v-else class="flex" style="flex-wrap:wrap;padding:0 20rpx;">
      <view>擅长技能：暂无</view>
    </view>
    <view v-if="list.lingyuLength !==0" class="flex" style="flex-wrap:wrap;padding:0 20rpx;margin-top: 5px">
      <view>擅长领域：</view>
      <view v-for="(item,index) in list.lingyu" :key="index" style="padding:4rpx 16rpx;border-radius: 12rpx;border: 2rpx solid #1176EF;font-size: 24rpx;color: #1176EF;margin:0 16rpx 16rpx 0;">{{item.kind}}</view>
    </view>
    <view v-else class="flex" style="flex-wrap:wrap;padding:0 20rpx;margin-top: 5px">
      <view>擅长领域：暂无</view>
    </view>

    <view style="font-size: 26rpx;font-weight: bold;color: #333333;margin:10px 0 12rpx 20rpx;">师傅简介</view>
    <view style="font-size: 26rpx;color: #333333;margin:0 20rpx 20rpx;">{{detail.info || '暂无'}}</view>
		<view style="background-color: #F7F6FA;padding:16rpx 20rpx;">
			<view style="font-weight: bold;color: #333333;margin-bottom:16rpx;">评价信息</view>
			<view v-for="(item,index) in detail.pinglun" :key="index" style="padding:20rpx;background: #FFFFFF;border-radius: 16rpx;margin-bottom:16rpx;">
				<view class="flex">
					<image style="width:80rpx;height:80rpx;border-radius:50%;" :src="item.icon"></image>
					<view style="margin-left: 12rpx;">
						<view style="line-height:36rpx;">{{item.nickname}}</view>
						<view style="font-size: 22rpx;color: #666666;">{{item.time}}</view>
					</view>
				</view>
				<view style="width:630rpx;height:90rpx;background: #F6F6F6;border-radius: 12rpx;margin:18rpx auto 16rpx;padding:12rpx 24rpx;">
					<view class="flexJusp">
						<view>上门速度<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{item.shudu}}</text><text style="color: #1176EF;">分</text></view>
						<view>服务质量<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{item.fuwu}}</text><text style="color: #1176EF;">分</text></view>
						<view>服务态度<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{item.taidu}}</text><text style="color: #1176EF;">分</text></view>
					</view>
					<view>服务时间<text style="color: #1176EF;font-weight:bold;font-size:30rpx;">{{item.time}}</text><text style="color: #1176EF;">分</text></view>
				</view>
				<view style="margin:16rpx 0 12rpx;font-size:26rpx;">{{item.content}}</view>
				<view class="flex" style="flex-wrap:wrap;">
					<image @click="yuImage(item.imgs,index)" v-for="(items,indexs) in item.imgs" :key="indexs"  style="width: 156rpx;height: 136rpx;border-radius: 12rpx;margin:0 14rpx 16rpx 0;" :style="(indexs+1)%3==0?'margin-right:0;':''" :src="items"></image>
				</view>
			</view>
		</view>
		<view style="height:env(safe-area-inset-bottom);"></view>
		<view class="post">
			<view class="buttons" @click="placeOrder">立即下单找师傅</view>
			<view style="height:env(safe-area-inset-bottom);"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				detail:'',
				biaoqian:[],
				juli:0,
        list:'',
			};
		},
		onLoad(option) {
			this.id = option.id

			this.loads()
		},
		methods:{
			yuImage(images,index) {
				var list = []
				for(let i=0;i<images.length;i++){
					list.push(images[i])
				}
				console.log(list, '预览图片')
				uni.previewImage({
					current: index,
					urls: list,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getDistance(lat1, lng1, lat2, lng2){
			  lat1 = lat1 || 0;
			  lng1 = lng1 || 0;
			  lat2 = lat2 || 0;
			  lng2 = lng2 || 0;
			  var rad1 = (lat1 * Math.PI) / 180.0;
			  var rad2 = (lat2 * Math.PI) / 180.0;
			  var a = rad1 - rad2;
			  var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			  var r = 6378137;
			  var distance =
			    r *
			    2 *
			    Math.asin(
			      Math.sqrt(
			        Math.pow(Math.sin(a / 2), 2) +
			          Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)
			      )
			    );
			  console.log(distance);
			  //返回单位：米
			  return distance;
			},
			placeOrder(){
				uni.switchTab({
					url:'/pages/PlaceOrder/PlaceOrder'
				})
			},
			loads(){
				this.$httpapi('fujindetail', 'POST',{userid:this.id}).then(res => {
					for(let i=0;i<res.data.pinglun.length;i++){
						if(res.data.pinglun[i].img){
							res.data.pinglun[i].imgs = res.data.pinglun[i].img.split(',')
						}
					}
					var juli = this.getDistance(uni.getStorageSync('latitude'),uni.getStorageSync('longitude'),res.data.latitude,res.data.longitude)/1000
					this.juli  = juli.toFixed(2)
					this.detail = res.data
				})
        this.$httpapi('getSkillById','POST',{userid:this.id}).then(res=>{
          this.list = res.data
          this.list.skillLength = this.list.skill?this.list.skill.length:0
          this.list.lingyuLength = this.list.lingyu?this.list.lingyu.length:0
        })
			},
			caozuo(type){
				this.$httpapi('caozuo', 'POST',{userid:this.id,flag:type}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon:'none'
					});
					this.loads()
				})
			}
		}
	}
</script>

<style lang="scss">
.master{
	padding:8rpx 0 140rpx;
	.post{
		position: fixed;
		bottom:0;
		left:0;
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0,0,0,0.06);
		.buttons{
			text-align: center;
			margin:20rpx;
			width: 710rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
}
</style>
